<template>
	<div class="box">
		<Header />
		<div class="content">
			<h2>我收到的回复</h2>
			<div class="first-list third-list">
				<div class="item">
					<el-icon :size="24" color="#2d3748"><ChatDotRound /></el-icon>
					<div class="text">
						<h3>您的评论有新回复</h3>
						<p class="dateTime">2025.08.02 19:00</p>
						<div class="author">
							<el-avatar :size="38" />
							<p>周小洮：「魯比娜朝這則貼文点了「讚」」</p>
						</div>
						<div class="bottom">
							<el-link>
								<el-icon><View /></el-icon>
								<span>查看文章</span>
							</el-link>
							<el-link>
								<el-icon><Position /></el-icon>
								<span>回复</span>
							</el-link>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import Header from "../components/Header.vue";
import {
	Flag,
	BellFilled,
	ChatDotRound,
	View,
	Position,
} from "@element-plus/icons-vue";

import { ref } from "vue";
const activeName = ref("second");
</script>

<style lang="scss" scoped>
.box {
	background: #ffffff;
}
.content {
	max-width: 512px;
	margin: 0 auto;
	h2 {
		height: 64px;
		line-height: 64px;
		text-align: center;
	}
	.first-list {
		display: flex;
		flex-direction: column;
		gap: 16px;
		.item {
			padding: 16px;
			display: flex;
			gap: 16px;
			border-bottom: 1px solid #edf2f7;
			h3 {
				font-weight: 500;
				line-height: 1.5;
				font-size: 14px;
				color: #2d3748;
			}
			.dateTime {
				font-size: 12px;
				font-weight: 400;
				line-height: 1.625;
				color: #718096;
			}
		}
	}
	.third-list {
		.item {
			position: relative;
			.text {
				flex: 1;
			}
			.author {
				display: flex;
				align-items: center;
				gap: 16px;
				margin-top: 8px;
				margin-bottom: 8px;
				p {
					font-size: 14px;
					font-weight: 400;
					line-height: 2;
					color: #2d3748;
				}
			}
			.bottom {
				display: flex;
				justify-content: flex-end;
				gap: 20px;
				:deep(.el-link__inner) {
					gap: 10px;
				}
			}
		}
	}
}
</style>